<template>
	<view class="types-pupup">
		<view class="product-info">
			<image v-if="isCart" class="img" :src="detailInfo.types[detailInfo.index].src"></image>
			<image v-else class="img" :src="detailInfo.suit_info[active].litpic"></image>
			<view v-if="isCart" class="info">
				<view class="price">
					{{globalExchangeRate}}{{amount==0 ? '电询' : amount}}
					<view class="sellprice">原价：{{globalExchangeRate}}{{sellprice}}</view>
				</view>
				<view class="selected">已选：{{detailInfo.types[detailInfo.index].name}}</view>
				<view v-if="detailInfo.types[detailInfo.index].inventory==-1" class="number">库存充足</view>
				<view v-else class="number">库存{{detailInfo.types[detailInfo.index].inventory}}件</view>
			</view>
			<view v-else class="info">
				<view class="price">
					{{globalExchangeRate}}{{amount==0 ? '电询' : amount}}
					<view class="sellprice">原价：{{globalExchangeRate}}{{sellprice}}</view>
				</view>
				<view class="selected">已选：{{detailInfo.suit_info[active].suitname}}</view>
				<view v-if="detailInfo.suit_info[active].number==-1" class="number">库存充足</view>
				<view v-else class="number">库存{{detailInfo.suit_info[active].number}}件</view>
			</view>
			<view class="iconfont close" @click="close">&#xe688;</view>
		</view>
		<view class="types-list">
			<view class="title">商品分类</view>
			<scroll-view class="list" :scroll-y="true">
				<view v-if="isCart" class="list-con">
					<view
					v-for="(item,index) in detailInfo.types" 
					:key="index" 
					class="item"
					:class="{on: index==detailInfo.index}"
					@click="attrSelect(index)"
					>{{item.name}}</view>
				</view>
				<view v-else class="list-con">
					<view
					v-for="(item,index) in detailInfo.suit_info" 
					:key="index" 
					class="item"
					:class="{on: index==active}"
					@click="attrSelect(index)"
					>{{item.suitname}}</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="numberShow" class="buy-number">
			<view class="title">购买数量</view>
			<view v-if="isCart" class="number">
				<template v-if="detailInfo.types[detailInfo.index].maxNum!=-1">
					<view class="max-number">每单最多可订{{detailInfo.types[detailInfo.index].maxNum}}件</view>
					<uni-number-box 
					:bookingStyle="true" 
					:max="(detailInfo.types[detailInfo.index].maxNum)" 
					:min="1" 
					:value="num"
					@change="change"
					></uni-number-box>
				</template>
				<template v-else>
					<uni-number-box 
					:bookingStyle="true" 
					:min="1" 
					:value="num"
					@change="change"
					></uni-number-box>
				</template>
			</view>
			<view v-else class="number">
				<template v-if="detailInfo.suit_info[active].max_order!=-1">
					<view class="max-number">每单最多可订{{detailInfo.suit_info[active].max_order}}件</view>
					<uni-number-box 
					:bookingStyle="true" 
					:max="(detailInfo.suit_info[active].max_order)" 
					:min="1" 
					:value="num"
					@change="change"
					></uni-number-box>
				</template>
				<template v-else>
					<uni-number-box 
					:bookingStyle="true" 
					:min="1" 
					:value="num"
					@change="change"
					></uni-number-box>
				</template>
			</view>
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<button
			v-if="amount!=0"
			class="confirm-btn" 
			type="default" 
			hover-class="none"
			@getAuthorize="transmit"
			scope="userInfo"
			open-type="getAuthorize"
			>确定</button>
			<button
			v-else
			class="confirm-btn" 
			type="default" 
			hover-class="none"
			disabled="true" 
			open-type="getUserInfo"
		>确定</button>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<button
			v-if="amount!=0"
			class="confirm-btn" 
			type="default" 
			hover-class="none"
			@click="transmit"
			>确定</button>
			<button
			v-else
			class="confirm-btn" 
			type="default" 
			hover-class="none"
			disabled="true" 
		>确定</button>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO || H5 || APP-PLUS -->
		<button
			v-if="amount!=0"
			class="confirm-btn" 
			type="default" 
			hover-class="none"
			@click="transmit"
			open-type="getUserInfo"
			>确定</button>
			<button
			v-else
			class="confirm-btn" 
			type="default" 
			hover-class="none"
			disabled="true" 
			open-type="getUserInfo"
		>确定</button>
	
		<!-- #endif -->		
	</view>
</template>

<script>
	/**
	 * 商城的类别选择弹窗
	 * @property {Boolean} numberShow 是否显示数量组件
	 * @property {Object} detailInfo 产品数据
	 * @property {Object} cartOpions 数量、index、价格
	 * @property {Boolean} isCart 是否为购物车页面
	 */
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	import { toPath } from '@/utils/toPath.js'
	export default {
		name: 'stShopsCartTypes',
		components:{
			uniNumberBox
		},
		props: {
			numberShow: {
				type: Boolean,
				default: false
			},
			detailInfo: {
				type: Object,
				default(){
					return {}
				}
			},
			cartOpions: {
				type: Object,
				default(){
					return {}
				}
			},
			isCart: {
				type: Boolean,
				default: false
			}
		},
		created(){
			if(this.cartOpions){
				this.active=this.cartOpions.active;
				this.num=this.cartOpions.num || 1;
			}
		},
		computed: {
			amount: function(){
				if(JSON.stringify(this.detailInfo)!="{}" && this.detailInfo!=null){
					if(this.isCart){
						return Number(this.num * this.detailInfo.types[this.detailInfo.index].price).toFixed(2)
					}
					return Number(this.num * this.detailInfo.suit_info[this.active].price).toFixed(2)
				}else{
					return 0;
				}
				
			},
			sellprice: function(){
				if(JSON.stringify(this.detailInfo)!="{}" && this.detailInfo!=null){
					if(this.isCart){
						return Number(this.detailInfo.types[this.active].sellprice).toFixed(2)
					}
					return Number(this.detailInfo.suit_info[this.active].sellprice).toFixed(2)
				}else{
					return 0;
				}
				
			}
		},
		watch: {
			active(newD,oldD){
				if(newD!=oldD){
					this.num=1
				}
			}
		},
		data() {
			return {
				active: 0,
				num: 1,
			};
		},
		methods: {
			
			// 弹窗关闭
			close(){
				this.$emit('close');
			},
			
			// 选择
			attrSelect(index){
				this.active=index;
				if(this.isCart){
					this.$emit('select',index);
				}
			},
			
			// 确定
			transmit(){
				let pro={
					active: this.active,
					num: this.num,
					amount: this.amount
				}
				this.$emit('active',pro);
				this.close();
			},
			
			// 数量
			change(num){
				this.num=parseInt(num);
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.types-pupup{
		padding: 0 25rpx 26rpx;
		border-radius: 22rpx 22rpx 0 0;
		font-size: $uni-font-size-sm;
		background-color: #fff;
	}
	.product-info{
		position: relative;
		@extend .alignItems;
		padding: 30rpx 0 25rpx;
		.img{
			width: 160rpx;
			height: 160rpx;
			margin-right: 30rpx;
		}
		.info{
			@extend .flex1;
			width: 450rpx;
			font-family: "Arial";
		}
		.price{
			margin-bottom: 12rpx;
			font-size: 38rpx;
			color: #ff4e00;
		}
		.selected{
			margin-bottom: 16rpx;
			font-size: 26rpx;
		}
		.number{
			color: $uni-text-color-grey;
		}
		.close{
			position: absolute;
			top: 27rpx;
			right: 0;
			font-size: 26rpx;
			color: #c3c3c3;
		}
	}
	.types-list,.buy-number{
		border-top: 1rpx solid $uni-border-color;
		.title{
			font-size: $uni-font-size-base;
		}
	}
	.types-list{
		padding: 20rpx 0 6rpx;
		.title{
			margin-bottom: 18rpx;
		}
		.list{
			max-height: 230rpx;
			margin-left: -20rpx;
		}
		.list-con{
			@extend .displayflex;
			flex-wrap:wrap;
		}
		.item{
			@extend .ellipse;
			box-sizing: border-box;
			max-width: 100%;
			height: 58rpx;
			margin: 0 0 20rpx 20rpx;
			padding: 0 17rpx;
			line-height: 54rpx;
			border: 2rpx solid #f5f5f5;
			background-color: #f5f5f5;
			border-radius: 7rpx;
			&.on{
				color: #ff6301;
				border-color: #ff6301;
				background-color: #fff9f9;
			}
		}
	}
	.buy-number{
		@extend .justifyspacec;
		padding: 35rpx 0;
		.number{
			@extend .alignItems;
		}
		.max-number{
			margin-right: 25rpx;
			font-size: 22rpx;
			color: $uni-text-color-grey;
		}
	}
	.confirm-btn{
		height: 70rpx;
		padding: 0;
		margin-top: 100rpx;
		line-height: 70rpx;
		border-radius: 35px;
		font-size: $uni-font-size-base;
		background-color: #ff6301;
		color: $uni-text-color-inverse;
	}
	.sellprice{
		text-decoration: line-through;
		font-size: 24rpx;
		color: #949494;
	}
</style>
